<template>
	<view class="container" :class="skinStyle">
		<scroll-view class="top-tabs-view" scroll-x="true">
			<!-- <progress v-if="progressFlg" percent="100" activeColor="#e83f0a" active stroke-width="1" duration="5" class="progress" /> -->
			<block v-for="(tab, index) in tabs" :key="index">
				<view class="tabs-item-wrap" v-bind:id="'tabNum' + index" @click="swichMenu(index)">
					<view class="tabs-item" :class="[currentTab == index ? 'tabs-item-act' : '']">
						<view class="tabs-item-txt">{{ tab.name }}</view>
						<view class="tabs-item-bottom"></view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view style="margin-top: 104rpx;">
			<checkbox-group class="tui-checkbox" style="text-align: right; padding-right: 1rem; color: #EA655E;" @change="checkboxChange">
				<label>
					<checkbox :checked="checkedFlag" color="#fff"/>全店顾客
				</label>
			</checkbox-group>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="true">
			<view class="scrollList" v-if="currentTab == 0 || currentTab == 2">
				<view class="tui-list city-list" v-if="customerList.length > 0">
					<block v-for="(item,index) in customerList" :key="index">
						<view class="tui-list-cell">
							<view class="tui-list-cell-navigate" @click="toInfo">
								<image :src="item.headimgurl" class="img"></image>
								<view class="content">
									<view class="title">{{item.memberName?item.memberName:item.nikeName}}</view>
									<view class="sub-title">
										<text>消费次数：<text style="color: #EA655E;">{{ item.memberBirth }}</text>次</text>
									</view>
								</view>
								<text class="iconfont iconxiangyou"></text>
							</view>
						</view>
					</block>
				</view>
				<mix-empty v-else :backgroundColor="'#fff'"></mix-empty>
			</view>
			
			<view class="scrollList ashSetting" v-if="currentTab == 1 || currentTab == 2">
				<view class="tui-list city-list" v-if="customerList.length > 0">
					<block v-for="(item,index) in customerList" :key="index">
						<view class="tui-list-cell">
							<view class="tui-list-cell-navigate" @click="toInfo">
								<image :src="item.headimgurl" class="img"></image>
								<view class="content">
									<view class="title">{{item.memberName?item.memberName:item.nikeName}}</view>
									<view class="sub-title">
										<text>消费次数：<text style="color: #EA655E;">{{ item.memberBirth }}</text>次</text>
									</view>
								</view>
								<text class="iconfont iconxiangyou"></text>
							</view>
						</view>
					</block>
				</view>
				<mix-empty v-else :backgroundColor="'#fff'"></mix-empty>
			</view>
		</mescroll-body>
		
		<!-- <loading></loading> -->
		<tui-modal></tui-modal>
		<foot-bar :tabbar="tabbar"></foot-bar>
	</view>
</template>

<script>
import tuiButton from '@/components/button/button';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiListCell from '@/components/list-cell/list-cell';
import mixin from '@/utils/mixin.js';
import footBar from "../footbar/footbar.vue"
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [mixin, MescrollMixin],
	components: {
		footBar,
		tuiButton,
		tuiLoadmore,
		tuiNomore,
		tuiListCell
	},
	data() {
		return {
			tabs: [
				{
					name: '绑定的顾客'
				},
				{
					name: '解绑的顾客'
				},
				{
					name: '全部'
				}
			],
			tabbar: [
				{
					icon: 'iconshouyehome',
					text: "订单记录"
				}
				, {
					icon: 'icon2',
					text: "我的顾客"
				}
				, {
					icon: 'iconwode',
					text: "优惠卡卷"
				}, {
					icon: 'iconwode',
					text: "店铺信息"
				}
			],
			currentTab: 0,
			grouponInfo: [],
			imgSrc: this.$store.state.imgUrl,
			address: '',
			nickName: '',
			checkedFlag: false,
			checkedValue: '饭',
			customerList: [
				{
					"customerUserId":"1381440283017801730",
					"memberName":"王勇",
					"memberPhone":"13888888888",
					"memberGender":1,
					"memberBirth":"10",
					"headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132",
					"realAmount":1000
				},
				{
					"customerUserId":"1381440283017801730",
					"memberName":"董莹",
					"memberPhone":"13888888888",
					"memberGender":1,
					"memberBirth":"8",
					"headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/M5bIsGJ28psXKrqER4n3CAJUj8mrzibQsqRbibSe1GPcW6b4nuNpBycT0ibMS1I9Q24kAnCL55KOD7VuIvA119ujw/132",
					"realAmount":1000
				}
			],
		};
	},
	onLoad(options) {
	},
	filters: {},
	methods: {
		swichMenu: async function(current) {
			console.log(current)
			//点击其中一个 tab
			if (this.currentTab == current) {
				return false;
			} else {
				this.searchKey = '';
				this.progressFlg = true;
				this.currentTab = current;
				if (this.currentTab !== 6) {
					this.orderList = []; // 先置空列表,显示加载进度
				} else {
					this.postSaleList = [];
				}
			}
		},
		upCallback(page) {
			this.mescroll.endSuccess(10);
		},
		checkboxChange() {
			this.checkedFlag = !this.checkedFlag
		},
		toInfo() {
			uni.navigateTo({
				url:'/packageG/pages/customer/customerInfo'
			})
		}
	}
};
</script>
<style lang="scss">
	.progress {
		display: flex;
		top: 0;
		z-index: 9999999;
		width: 100%;
	}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
		height: 100%;
		width: 100；
	}
	/deep/ .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
	}
	scroll-view [style*='overflow']::-webkit-scrollbar {
		display: none;
	}
	.top-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
		box-shadow: 0 0 4rpx #e5e5e5;
		white-space: nowrap;
		height: 90rpx;
		position: fixed;
		left: 0;
		background: #fff;
		.tabs-item-wrap {
			display: inline-block;
			white-space: nowrap;
			height: 90rpx;
			width: 33.3%;
			.tabs-item {
				margin: 0 84rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.tabs-item-txt {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
				.tabs-item-bottom {
					position: absolute;
					bottom: 0rpx;
					width: 130rpx;
					height: 4rpx;
					left: calc(50% - 65rpx);
				}
			}
			.tabs-item-act {
				.tabs-item-txt {
					//color:  $themeColor;
				}
				.tabs-item-bottom {
					//background:  $themeColor;
				}
			}
		}
	}

	.tui-list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.tui-list-cell:not(:last-child) {
		border-bottom: 1px solid #eee;
	}

	.tui-list-cell-hover {
		background-color: #eee !important;
	}

	.tui-list-cell-navigate {
		width: 100%;
		position: relative;
		background: #fff;
		padding: 20rpx 32rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		align-items: center;
		// border-radius: 16rpx;
	}

	.img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.content {
		width: 80%;
		padding-left: 30rpx;
	}

	.title {
		width: 80%;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		color: #111;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.sub-title {
		display: flex;
		width: 80%;
		color: #999999;
		font-size: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 20rpx;

		.birth-image {
			width: 28rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
	}

	.tui-list {
		// background-color: #f7f7f7;
		// position: relative;
		// width: 100%;
		// display: flex;
		// flex-direction: column;
		// padding-bottom: env(safe-area-inset-bottom);
		// padding: 0 32rpx;
	}

	.tui-list-cell-divider {
		font-size: 28rpx;
		color: #111;
		background: #f7f7f7;
		display: flex;
		align-items: center;
		margin: 24rpx 0;
	}

	.tui-indexed-list-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 9999;
		position: absolute;
		top: 132rpx;
		right: 0;
		padding-right: 32rpx;
		width: 44rpx;
	}

	.tui-indexed-list-text {
		font-size: 24rpx;
		color: #999999;

		&.active-text {
			color: #EA655E;
		}
	}

	.tui-indexed-list-bar.active {
		background-color: #EA655E;
	}

	.tui-indexed-list-alert {
		position: fixed;
		z-index: 20;
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		right: 40%;
		top: 40%;
		border-radius: 16rpx;
		text-align: center;
		font-size: 50rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.scrollList{
		margin-top: 24rpx;
	}
	.ashSetting {
		-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
		filter: grayscale(100%);
	}
</style>
